<template>
	<div class="wrapper">
		<view class="bg-bubbles">
			<view class="bubble" v-for="item in 20" :key="item" :style="{'left':(Math.floor((Math.random()*100)+1)) + '%',
						'animation-delay': (Math.floor((Math.random()*20)+1)) + 's',
						'background-color': 'rgba(255, 255, 255, '+ Math.random() * 0.7 +')',
						'width':(item + 20) % 30 + 'px',
						'height':(item + 20) % 30 + 'px'}" />
		</view>
	</div>
</template>

<script>
	export default {
		name: "bubble-block",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.wrapper {
		position: absolute;
		width: 330upx;
		height: 330upx;
		overflow: hidden;
	}

	.bg-bubbles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.bg-bubbles .bubble {
		position: absolute;
		list-style: none;
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		bottom: -20upx;
		animation: square 10s infinite;
		transition-timing-function: linear;
	}

	@keyframes square {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-200px) rotate(200deg);
		}
	}
</style>
